{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
</head>
<body>
    <a href="../add">添加学生</a>
    <table border="1px" width="100%" style="border-collapse: collapse;">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>学号</th>
            <th>城市</th>
            <th>操作</th>
        </tr>
        {% for student in students %}
        <tr>
            <td align="center">{{ forloop.counter }}</td>
            <td align="center">{{ student.student_name }}</td>
            <td align="center">{{ student.student_no }}</td>
            <td align="center">{{ student.student_city }}</td>  <!-- 添加城市列 -->
            <td align="center">
                <a href="../edit/?id={{ student.id }}">编辑</a>
                <a href="../delete/?id={{ student.id }}">删除</a>
            </td>
        </tr>
        {% endfor %}
    </table>

    <div id="main" style="width: 600px; height: 400px;"></div>
    <script src="{% static 'js/echarts.min.js'%}"></script>
    <script src="{% static 'js/jquery-2.2.3.min.js'%}"></script>

     <script>

     var city_counts = {{ city_counts|safe }};
        var x_data = [];
        var y_data = [];
        for (var i = 0; i < city_counts.length; i++) {
            x_data.push(city_counts[i]['student_city']);
            y_data.push(city_counts[i]['count']);
        }

        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            xAxis: {
                type: 'category',
                data: x_data
            },
            yAxis: {
        type: 'value',
        minInterval: 1, // 设置刻度的最小间隔为 1，确保只显示整数刻度
        axisLabel: {
            formatter: '{value}' // 设置刻度标签格式为整数
        }
    },
            series: [{
                type: 'bar',
                data: y_data
            }]
        };

        myChart.setOption(option);
    </script>
</body>
</html>
